<template>
  <div class="agent page">
    <formHeader :w-color="true" title="代理有利"></formHeader>
    <cube-scroll
        :data="goodsTypeList"
        ref="scroll"
       >

     <div class="search">
       <div class="inp">
         <span class="iconfont iconsousuo1x"></span>
         <input v-model="name" type="text" class="input">
       </div>
       <div class="btn">搜索</div>
     </div>

      <div class="types">
        <div class="items">
        <div class="item" @click="selType(type.id)" v-for="(type,index) in goodsTypeList" :key="index">
          <img :src="imgH+type.img" alt="" class="img">
          <span class="name"  :class="{active:type.id==typeId}">{{type.name}}</span>
        </div>
        </div>
      </div>

     <div class="goods-type-list">
        <div class="item" v-for="(type,index) in filterData" :key="index">
          <div class="type-name">
            <span class="name" style="font-style: italic;">
              {{type.name}}
            </span>
          </div>
          <twoList :list="notDailySel(type.list)" v-slot="{item}">
          <div class="list" >
            <div class="goods" @click="turn(item.id)"  :key="index">
               <img :src="imgH+item.img" alt="" class="img">
              <span class="name">
                {{item.name}}
              </span>
              <div class="prices">
                <div class="now-price">
                  <span class="icon">￥</span>
                  <span class="price">{{item.nowPrice}}</span>
                </div>
                <div class="old-price">
                  <span class="icon">￥</span>
                  <span class="price">{{item.oldPrice}}</span>
                </div>
                <div class="cart">
                  <span class="iconfont iconcart"></span>
                </div>
              </div>
            </div>
          </div>
          </twoList>
        </div>
     </div>
    </cube-scroll>
  </div>
</template>

<script>
import  twoList from '@/components/two-list/two-list'
import  {listBySaleType} from '@/api/goods'
import formHeader from '@/components/form-header'
export default {
  name: "agent",
  components:{
    twoList, formHeader
  },
  created() {
    let saleTypeId = this.$route.query.saleTypeId
    listBySaleType(saleTypeId).then(res =>{
      this.goodsTypeList = res.data
    })
  },
  computed:{
    filterData(){
        return this.filter()
    }
  },
  methods:{
    notDailySel(list){
      return list.filter(item => !item.dailySel)
    },
    turn(id){
      this.$router.push({
        path:'/detail',
        query:{
          id:id
        }
      })
    },
    selType(typeId){
     if( this.typeId == typeId){
       this.typeId =null
     }else {
       this.typeId = typeId
     }
    },
    filter(){
      //筛选类型
      let goodsTypeList =  this.goodsTypeList.filter(item =>{
        if(!this.typeId){
          return  true
        }else {
          return this.typeId==item.id
        }
      })

      //深拷贝
      goodsTypeList = JSON.parse(JSON.stringify(goodsTypeList))
      //名字筛选
      if(!this.name) return goodsTypeList
      goodsTypeList =  goodsTypeList.filter(item => {
        item.list = item.list.filter(goods=>{
          return  goods.name.indexOf(this.name)>-1
        })
        return item.list.length>0
      })
      return goodsTypeList
    }
  },
  data(){
    return {
      goodsTypeList:[],
      name:null,
      typeId:null,
      imgH : process.env.VUE_APP_IMG_DOMAIN
    }
  }
}
</script>

<style scoped lang="stylus">
  .agent
    background-color #88DAD2
    .types
      border-radius: 5px;
      padding 0 12px
      .items
        padding 12px 0
        background: #FFFFFF;
        display flex
        flex-wrap wrap
        align-items center
        height 100%
        .item
          display flex
          flex-direction column
          align-items center
          margin-left 24px
          .img
            width 56px
            height 56px
            border-radius 50%
          .name
            margin-top 9px
            font-size 15px
            color #666666
            &.active
              color #E32A28
    .search
      display flex
      padding 0 12px
      margin 9px 0
      margin-top 60px
      .inp
        border-radius 5px
        flex 1
        height 32px
        background-color white
        display flex
        align-items center
        .iconfont
          color  #88DAD2
          font-size 20px
          margin 0 8px
        .input
          color  #88DAD2
          font-size 20px
          flex 1
          outline none
      .btn
        width 67px
        height 32px
        background-color #68BAB2
        color white
        font-size 14px
        display flex
        align-items center
        justify-content center
        border-radius 5px
        margin-left 7px
    .goods-type-list
      .item
        display flex
        align-items center
        flex-direction column
        justify-content center
        .type-name
            width 248px
            height 34px
            background url("bg.png") no-repeat
            background-size 100% 100%
            display flex
            align-items center
            justify-content center
            padding-bottom 5px
            margin-bottom 12px
            margin-top 21px
          .name
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
        .list
            display flex
            flex-wrap wrap
            justify-content space-between
            .goods
              overflow hidden
              width 173px
              background-color white
              border-radius 5px
              display flex
              flex-direction column
              .img
                   width 100%
                   height 173px
              .name
                  text-overflow ellipsis
                  line-clamp 1
                  overflow hidden
                  width 100%
                  white-space nowrap
                  font-size: 15px;
                  font-family: PingFang SC;
                  font-weight: 300;
                  color: #333333;
                  margin 8px 8px 0px 8px
                  line-height 20px
              .prices
                  padding 8px 8px
                  display flex
                  align-items flex-end
                  .cart
                    margin-bottom -5px
                    width 25px
                    height 25px
                    background-color #FF3535
                    border-radius 50%
                    display flex
                    align-items center
                    justify-content center
                    color white
                    padding 2px 2px
                  .now-price
                    font-size: 18px;
                    font-family: DIN;
                    font-weight: 500;
                    color: #333333;
                  .icon
                    font-size 8px
                  .old-price
                    flex 1
                    margin-left 8px
                    font-size: 12px;
                    font-weight: 500;
                    color: #C8C8C8;
                    text-decoration line-through
                    .icon
                      font-size 7px


</style>